Kirurgipedia

; return (

Alle opslag ({posts.length})

{posts.map(p => (

onEdit(p)}>

{p.title}

{sectionName(sections, p.section_id)} · {fmtDate(p.created_at)} · {p.image_count} billeder

{p.status === 'published' ? 'Publiceret' : 'Kladde'}

))} {posts.length === 0 && (

📝

Ingen opslag endnu

Klik "+ Nyt opslag" for at komme i gang.

)}

); } // ── Post Editor MED FORBEDRET CROP ──────────────────────────────────────────── function PostEditor({ post, token, sections, onSave, onDelete, onClose, toast }) { const [title, setTitle] = useState(post.title || ''); const [body, setBody] = useState(post.body || ''); const [secId, setSecId] = useState(post.section_id || sections[0]?.id || ''); const [status, setStatus] = useState(post.status || 'published'); const [images, setImages] = useState([]); const [busy, setBusy] = useState(false); const [postId, setPostId] = useState(post._new ? null : post.id); const fileRef = useRef(); // 🎨 FORBEDRET CROP STATE const [cropSrc, setCropSrc] = useState(null); const [cropImgId, setCropImgId] = useState(null); const [cropInst, setCropInst] = useState(null); const [cropBusy, setCropBusy] = useState(false); const [cropLoading, setCropLoading] = useState(false); const [cropAspect, setCropAspect] = useState('free'); const cropRef = useRef(); // Hent billeder til eksisterende opslag useEffect(() => { if (!post._new && post.id) { adminApi({ action:'get-post', id: post.id }, token).then(d => { if (d.images) setImages(d.images); }); } }, [post.id]); // 🎨 FORBEDRET: Cropper init med loading state useEffect(() => { if (!cropSrc) return; setCropLoading(true); let inst; const t = setTimeout(() => { if (!cropRef.current) { setCropLoading(false); return; } inst = new Cropper(cropRef.current, { viewMode: 1, autoCropArea: 1, movable: true, zoomable: true, rotatable: true, scalable: true, responsive: true, restore: true, checkOrientation: true, guides: true, center: true, highlight: true, background: false, autoCrop: true, }); // Vent på ready event cropRef.current.addEventListener('ready', () => { setCropInst(inst); setCropLoading(false); }); }, 80); return () => { clearTimeout(t); if (inst) inst.destroy(); setCropLoading(false); }; }, [cropSrc]); // 🎨 NYT: Keyboard shortcuts useEffect(() => { if (!cropSrc) return; const handleKey = (e) => { if (e.key === 'Escape') closeCrop(); if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) saveCrop(); if (e.key === 'r' && !e.metaKey && !e.ctrlKey) { e.preventDefault(); cropInst?.rotate(90); } if (e.key === 'R' && e.shiftKey) { e.preventDefault(); cropInst?.rotate(-90); } if (e.key === 'f' && !e.metaKey && !e.ctrlKey) { e.preventDefault(); const d = cropInst?.getImageData(); cropInst?.scaleX(d?.scaleX === -1 ? 1 : -1); } if (e.key === 'z' && !e.metaKey && !e.ctrlKey) { e.preventDefault(); cropInst?.reset(); } }; window.addEventListener('keydown', handleKey); return () => window.removeEventListener('keydown', handleKey); }, [cropSrc, cropInst]); // 🎨 FORBEDRET: Validation + error handling function openCropNew(file) { const MAX_SIZE = 10 * 1024 * 1024; if (file.size > MAX_SIZE) { toast(`Billedet er for stort (${(file.size/1024/1024).toFixed(1)}MB). Max 10MB.`, 'error'); return; } if (!file.type.startsWith('image/')) { toast('Kun billedfiler er tilladt (JPG, PNG, WebP)', 'error'); return; } const reader = new FileReader(); reader.onload = e => { setCropSrc(e.target.result); setCropImgId(null); setCropAspect('free'); }; reader.onerror = () => { toast('Kunne ikke læse billedet', 'error'); }; reader.readAsDataURL(file); } function openCropExisting(img) { setCropSrc(img.image_url); setCropImgId(img.id); setCropAspect('free'); } function closeCrop() { if (cropInst) { cropInst.destroy(); setCropInst(null); } setCropSrc(null); setCropImgId(null); setCropAspect('free'); } // 🎨 FORBEDRET: Intelligent compression + WebP fallback async function saveCrop() { if (!cropInst) return; let pid = postId; if (!pid && !cropImgId) { if (!title.trim()) { toast('Skriv en titel inden du uploader billede', 'error'); return; } setBusy(true); const d = await adminApi({ action:'create-post', title, body, section_id: secId, status }, token); setBusy(false); if (d.error) { toast(d.error, 'error'); return; } pid = d.id; setPostId(pid); } setCropBusy(true); try { const imgData = cropInst.getImageData(); const targetWidth = Math.min(imgData.naturalWidth, 1600); const canvas = cropInst.getCroppedCanvas({ width: targetWidth, maxHeight: 1600, imageSmoothingQuality: 'high', fillColor: '#fff' }); if (!canvas) { toast('Kunne ikke generere billede', 'error'); setCropBusy(false); return; } let imageData; let format = 'webp'; try { imageData = canvas.toDataURL('image/webp', 0.85); if (!imageData.startsWith('data:image/webp')) { throw new Error('WebP not supported'); } } catch (e) { format = 'jpeg'; imageData = canvas.toDataURL('image/jpeg', 0.82); } const sizeInMB = (imageData.length * 0.75) / 1024 / 1024; if (sizeInMB > 5) { toast(`Billedet er stort (${sizeInMB.toFixed(1)}MB). Overvej at beskære mere.`, 'warning'); } if (cropImgId) { const existing = images.find(i => i.id === cropImgId); const pid2 = postId || post.id; await adminApi({ action:'delete-image', id: cropImgId }, token); const d = await adminApi({ action: 'upload-image', post_id: pid2, imageData, caption: existing?.caption || '', sort_order: existing?.sort_order ?? 0, }, token); if (d.id || d.ok) { setImages(imgs => imgs.map(i => i.id === cropImgId ? { ...i, id: d.id, image_url: d.url } : i )); toast(`Billede opdateret ✓ (${format.toUpperCase()}, ${sizeInMB.toFixed(1)}MB)`); } else { toast(d.error || 'Upload fejlede', 'error'); } } else { const d = await adminApi({ action: 'upload-image', post_id: pid, imageData, caption: '', sort_order: images.length, }, token); if (d.id || d.ok) { setImages(imgs => [...imgs, { id: d.id, image_url: d.url, caption: '', sort_order: imgs.length, post_id: pid }]); toast(`Billede uploadet ✓ (${format.toUpperCase()}, ${sizeInMB.toFixed(1)}MB)`); } else { toast(d.error || 'Upload fejlede', 'error'); } } } catch(e) { toast('Fejl: ' + e.message, 'error'); } setCropBusy(false); closeCrop(); } async function save() { if (!title.trim()) return toast('Titel kræves', 'error'); setBusy(true); let pid = postId; if (post._new && !pid) { const d = await adminApi({ action:'create-post', title, body, section_id: secId, status }, token); if (d.error) { toast(d.error, 'error'); setBusy(false); return; } pid = d.id; setPostId(pid); for (const img of images) await adminApi({ action:'update-image', id: img.id, caption: img.caption, sort_order: img.sort_order, post_id: pid }, token); } else if (pid) { await adminApi({ action:'update-post', id: pid, title, body, section_id: secId, status }, token); } setBusy(false); onSave(); } async function doDelete() { if (!confirm('Slet dette opslag og alle tilhørende billeder?')) return; await adminApi({ action:'delete-post', id: postId }, token); onDelete(); } async function deleteImage(id) { if (!confirm('Slet dette billede?')) return; await adminApi({ action:'delete-image', id }, token); setImages(imgs => imgs.filter(i => i.id !== id)); toast('Billede slettet'); } async function updateCaption(id, caption) { setImages(imgs => imgs.map(i => i.id === id ? { ...i, caption } : i)); await adminApi({ action:'update-image', id, caption, sort_order: images.find(i=>i.id===id)?.sort_order || 0, post_id: postId }, token); } return ( <>

{post._new ? 'Nyt opslag' : 'Rediger opslag'}

{!post._new && }

Billeder ({images.length})

fileRef.current.click()} onDragOver={e => { e.preventDefault(); e.currentTarget.classList.add('drag'); }} onDragLeave={e => e.currentTarget.classList.remove('drag')} onDrop={e => { e.preventDefault(); e.currentTarget.classList.remove('drag'); const f=e.dataTransfer.files[0]; if(f) openCropNew(f); }} >

📸

Klik eller træk et billede hertil

Beskær og roter inden upload · JPG, PNG, WEBP · Max 10MB

{ const f=e.target.files[0]; if(f) openCropNew(f); e.target.value=''; }}/> {images.length > 0 && (

{images.map(img => (

setImages(imgs => imgs.map(i => i.id === img.id ? {...i, caption: e.target.value} : i))} onBlur={e => updateCaption(img.id, e.target.value)}/>

))}

)}

Titel setTitle(e.target.value)} placeholder="Opslagets titel…"/>

Sektion

Status

Tekst / Beskrivelse

setBody(e.target.value)} placeholder="Skriv en beskrivelse, kliniske fund, behandling osv.…"/>
        </div>
      </div>

{/* 🎨 FORBEDRET CROP MODAL */}
      {cropSrc && (
        <div className="crop-overlay">
          <div className="crop-label">
            {cropImgId ? '✂️ Rediger eksisterende billede' : '✂️ Beskær nyt billede'}
            <div className="crop-shortcuts">
              <kbd>Esc</kbd> luk ·
              <kbd>⌘ Enter</kbd> gem ·
              <kbd>R</kbd> roter
            </div>
          </div>
          
          <div className="crop-box">
            {cropLoading && (
              <div className="crop-loading-overlay">
                <div className="spinner"/>
              </div>
            )}
            <img 
              ref={cropRef} 
              src={cropSrc} 
              alt="crop" 
              style={{ display:'block', maxWidth:'100%', opacity: cropLoading ? 0.3 : 1 }}
            />
          </div>
          
          <div className="crop-toolbar">
            <select 
              className="crop-btn" 
              value={cropAspect}
              onChange={(e) => {
                const val = e.target.value;
                setCropAspect(val);
                if (val === 'free') cropInst?.setAspectRatio(NaN);
                else if (val === '16:9') cropInst?.setAspectRatio(16/9);
                else if (val === '4:3') cropInst?.setAspectRatio(4/3);
                else if (val === '1:1') cropInst?.setAspectRatio(1);
                else if (val === '3:2') cropInst?.setAspectRatio(3/2);
              }}
              disabled={cropLoading}
              style={{ padding:'9px 12px', fontFamily:'Inter,sans-serif', cursor:'pointer' }}
            >
              <option value="free">📐 Fri beskæring</option>
              <option value="16:9">📺 16:9 (Wide)</option>
              <option value="4:3">📷 4:3 (Standard)</option>
              <option value="3:2">🖼️ 3:2 (Foto)</option>
              <option value="1:1">⬜ 1:1 (Kvadrat)</option>
            </select>
            <div className="crop-sep"/>
            
            <button 
              className="crop-btn" 
              onClick={() => cropInst?.rotate(-90)}
              disabled={cropLoading}
              title="Roter 90° mod venstre (Shift+R)"
            >
              ↺ −90°
            </button>
            <button 
              className="crop-btn" 
              onClick={() => cropInst?.rotate(90)}
              disabled={cropLoading}
              title="Roter 90° mod højre (R)"
            >
              ↻ +90°
            </button>
            <button 
              className="crop-btn" 
              onClick={() => cropInst?.rotate(180)}
              disabled={cropLoading}
            >
              ↕ 180°
            </button>
            <div className="crop-sep"/>
            
            <button 
              className="crop-btn" 
              onClick={() => { 
                const d=cropInst?.getImageData(); 
                cropInst?.scaleX(d?.scaleX===-1?1:-1); 
              }}
              disabled={cropLoading}
              title="Spejl vandret (F)"
            >
              ⇄ Spejl X
            </button>
            <button 
              className="crop-btn" 
              onClick={() => { 
                const d=cropInst?.getImageData(); 
                cropInst?.scaleY(d?.scaleY===-1?1:-1); 
              }}
              disabled={cropLoading}
            >
              ⇅ Spejl Y
            </button>
            <div className="crop-sep"/>
            
            <button 
              className="crop-btn" 
              onClick={() => cropInst?.reset()}
              disabled={cropLoading}
              title="Nulstil alle ændringer (Z)"
            >
              ⟳ Nulstil
            </button>
            <div className="crop-sep"/>
            
            <button 
              className="crop-btn del" 
              onClick={closeCrop}
              title="Luk uden at gemme (Esc)"
            >
              ✕ Annuller
            </button>
            <button 
              className="crop-btn ok" 
              onClick={saveCrop} 
              disabled={cropBusy || cropLoading}
              title="Gem billedet (⌘ Enter)"
            >
              {cropBusy ? '⏳ Gemmer…' : '✓ Gem billede'}
            </button>
          </div>
        </div>
      )}
    </>
  );
}

// Continue med SectionsTab og AdminsTab...
// ══════════════════════════════════════════════════════════════════════════════
// SIDST MANGLENDE KOMPONENTER + APP ROOT
// Tilføj efter admin_components.js
// ══════════════════════════════════════════════════════════════════════════════

// ── Sections tab ──────────────────────────────────────────────────────────────
function SectionsTab({ token, sections, onChange, toast }) {
  const [sects,   setSects]   = useState(JSON.parse(JSON.stringify(sections)));
  const [busy,    setBusy]    = useState(false);

return (
    <div>
      <div style={{ display:'flex', alignItems:'center', marginBottom: 20 }}>
        <h3 style={{ flex:1, fontWeight:700, fontSize:'.95rem' }}>Organiser sektioner</h3>
        <button className="btn btn-primary btn-sm" onClick={save} disabled={busy}>
          {busy ? 'Gemmer…' : '💾 Gem ændringer'}
        </button>
      </div>

<p style={{ fontSize:'.82rem', color:'var(--muted)', marginBottom: 20, lineHeight:1.6 }}>
        Opret og organiser sektioner for at kategorisere opslag. Hver hovedsektion kan have undersektioner.
      </p>

<div style={{ marginBottom: 12 }}>
        <button className="btn btn-secondary btn-sm" onClick={addSection}>+ Tilføj sektion</button>
      </div>

<div>
        {sects.map(s => (
          <div key={s.id} className="section-editor-item">
            <div className="section-editor-header">
              <span style={{ fontSize:'.9rem', opacity:.4, cursor:'grab' }}>⋮⋮</span>
              <input
                className="section-editor-name"
                value={s.name}
                onChange={e => updateName(s.id, e.target.value)}
                style={{ border:'none', background:'transparent', outline:'none', fontFamily:'Inter,sans-serif' }}
              />
              <button
                className="btn btn-secondary btn-sm"
                onClick={() => addChild(s.id)}
                style={{ fontSize:'.72rem', padding:'4px 9px' }}
              >
                + Undersektion
              </button>
              <button
                className="btn btn-danger btn-sm"
                onClick={() => removeSection(s.id)}
                style={{ fontSize:'.72rem', padding:'4px 9px' }}
              >
                ✕
              </button>
            </div>

{s.children?.length > 0 && (
              <div className="section-editor-children">
                {s.children.map(c => (
                  <div key={c.id} className="section-editor-child">
                    <span style={{ color:'#ccc', fontSize:'.76rem', flexShrink:0 }}>—</span>
                    <input
                      value={c.name}
                      onChange={e => updateChildName(s.id, c.id, e.target.value)}
                    />
                    <button
                      className="btn btn-danger btn-sm"
                      onClick={() => removeChild(s.id, c.id)}
                      style={{ fontSize:'.7rem', padding:'3px 8px' }}
                    >
                      ✕
                    </button>
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Admins tab ────────────────────────────────────────────────────────────────
function AdminsTab({ token, toast }) {
  const [admins, setAdmins] = useState([]);
  const [name,   setName]   = useState('');
  const [email,  setEmail]  = useState('');
  const [pass,   setPass]   = useState('');
  const [busy,   setBusy]   = useState(false);

useEffect(() => { load(); }, []);
  
  async function load() {
    const d = await adminApi({ action:'get-admins' }, token);
    setAdmins(d.admins || []);
  }
  
  async function create() {
    if (!name || !email || !pass) return toast('Alle felter kræves', 'error');
    setBusy(true);
    const d = await adminApi({ action:'create-admin', name, email, password: pass }, token);
    setBusy(false);
    if (d.error) return toast(d.error, 'error');
    setName(''); setEmail(''); setPass('');
    await load();
    toast('Admin oprettet ✓');
  }
  
  async function del(id) {
    if (!confirm('Slet denne admin?')) return;
    await adminApi({ action:'delete-admin', id }, token);
    await load();
    toast('Admin slettet');
  }

return (
    <div>
      <h3 style={{ fontWeight:700, fontSize:'.95rem', marginBottom:18 }}>Eksisterende admins</h3>
      
      {admins.map(a => (
        <div key={a.id} style={{ 
          display:'flex', 
          alignItems:'center', 
          padding:'12px 16px', 
          border:'1px solid var(--border)', 
          borderRadius:10, 
          marginBottom:10, 
          gap:12,
          transition:'all .2s'
        }}>
          <div style={{ flex:1 }}>
            <div style={{ fontWeight:600, fontSize:'.9rem' }}>{a.name}</div>
            <div style={{ fontSize:'.76rem', color:'var(--muted)' }}>
              {a.email} · Oprettet {fmtDate(a.created_at)}
            </div>
          </div>
          <button className="btn btn-danger btn-sm" onClick={() => del(a.id)}>Slet</button>
        </div>
      ))}
      
      {admins.length === 0 && (
        <p style={{ color:'var(--muted)', fontSize:'.84rem', marginBottom:18 }}>
          Ingen ekstra admins endnu.
        </p>
      )}

<h3 style={{ fontWeight:700, fontSize:'.95rem', margin:'28px 0 14px' }}>Tilføj ny admin</h3>
      
      <div className="form-group">
        <label className="form-label">Navn</label>
        <input className="form-input" value={name} onChange={e=>setName(e.target.value)} placeholder="Fuldt navn"/>
      </div>
      
      <div className="form-group">
        <label className="form-label">E-mail</label>
        <input className="form-input" type="email" value={email} onChange={e=>setEmail(e.target.value)} placeholder="email@hospital.dk"/>
      </div>
      
      <div className="form-group">
        <label className="form-label">Adgangskode</label>
        <input className="form-input" type="password" value={pass} onChange={e=>setPass(e.target.value)} placeholder="Vælg en stærk adgangskode"/>
      </div>
      
      <button className="btn btn-primary" onClick={create} disabled={busy}>
        {busy ? 'Opretter…' : '+ Opret admin'}
      </button>
    </div>
  );
}

// ── App root ──────────────────────────────────────────────────────────────────
function App() {
  const [sections,  setSections]  = useState([]);
  const [posts,     setPosts]     = useState([]);
  
  async function reloadPosts() {
    const d = await pubApi({ action: 'init' });
    setPosts(d.posts || []);
  }
  
  const [view,      setView]      = useState('home');
  const [selSection,setSelSection]= useState(null);
  const [selPost,   setSelPost]   = useState(null);
  const [searchQ,   setSearchQ]   = useState('');
  const [activeQ,   setActiveQ]   = useState('');
  const [loading,   setLoading]   = useState(true);

// Admin state
  const [adminToken, setAdminToken] = useState(() => localStorage.getItem('kp_token') || '');
  const [adminName,  setAdminName]  = useState(() => localStorage.getItem('kp_name')  || '');
  const [showLogin,  setShowLogin]  = useState(false);
  const [showAdmin,  setShowAdmin]  = useState(false);
  const [adminSection, setAdminSection] = useState(null);

// Toast
  const [toastMsg, setToastMsg] = useState(null);
  function toast(msg, type = 'ok') { setToastMsg({ msg, type }); }

// Topbar breadcrumb
  const [breadcrumb, setBreadcrumb] = useState('');

useEffect(() => {
    pubApi({ action: 'init' }).then(d => {
      if (Array.isArray(d.sections)) setSections(d.sections);
      if (Array.isArray(d.posts)) setPosts(d.posts);
      setLoading(false);
    });
  }, []);

if (loading) return (
    <div style={{ 
      display:'flex', 
      alignItems:'center', 
      justifyContent:'center', 
      minHeight:'100vh', 
      flexDirection:'column', 
      gap:18 
    }}>
      <div className="spinner"/>
      <p style={{ color:'#888', fontSize:'.88rem' }}>Indlæser Kirurgipedia…</p>
    </div>
  );

return (
    <div className="layout">
      <Sidebar
        sections={sections}
        view={view}
        selSection={selSection}
        onSection={goSection}
        onHome={goHome}
        adminToken={adminToken}
        onAdminClick={openAdmin}
        onSearch={doSearch}
        searchQ={searchQ}
        setSearchQ={setSearchQ}
      />

<div className="main">
        {breadcrumb && (
          <div className="topbar">
            <div className="breadcrumb">
              <span onClick={goHome}>Kirurgipedia</span>
              {breadcrumb && <> › <span>{breadcrumb}</span></>}
            </div>
          </div>
        )}

{view === 'home'    && <HomeView sections={sections} posts={posts} onSection={goSection} onPost={goPost} adminToken={adminToken} onNewPost={() => openNewPost(null)}/>}
        {view === 'section' && <SectionView sectionId={selSection} sections={sections} onPost={goPost} adminToken={adminToken} onNewPost={sid => openNewPost(sid)}/>}
        {view === 'article' && <ArticleView postId={selPost} sections={sections} adminToken={adminToken} onEdit={post => { setShowAdmin(true); }} onBack={() => setView('section')}/>}
        {view === 'search'  && <SearchView query={activeQ} sections={sections} onPost={goPost}/>}
      </div>

{showLogin && <AdminLogin onLogin={doLogin} onClose={() => setShowLogin(false)}/>}

{showAdmin && adminToken && (
        <AdminPanel
          token={adminToken}
          adminName={adminName}
          sections={sections}
          onClose={() => { setShowAdmin(false); setAdminSection(null); }}
          onSectionsChanged={s => setSections(s)}
          onLogout={doLogout}
          toast={toast}
          defaultSection={adminSection}
          onReloadPosts={reloadPosts}
        />
      )}

{toastMsg && <Toast msg={toastMsg.msg} type={toastMsg.type} onDone={() => setToastMsg(null)}/>}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
</script>
</body>
</html>

Admin Panel

Alle opslag ({posts.length})

Ingen opslag endnu

{post._new ? 'Nyt opslag' : 'Rediger opslag'}